<template>
  <div class="content-wrap" id="wrap">
    <!-- <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image> -->



    <!-- 底图容器 -->
    <!-- <img id="base-image" :src="src" fit="fill" usemap="#Map" alt="Base Image" @click="handleImageClick">

    <map name="Map" id="Map">
      <area id="1001" shape="rect" coords="0,0,500,500" href="javascript:void(0)" @click="handlerFloor('1幢')" />
    </map> -->


    <div class="form-container">
      <div class="form-row">
        <label for="input1">剩余车位数：</label>
        <input id="input1" type="text" v-model="remainNum" readonly />
      </div>

      <div class="form-row">
        <label for="input2">本层车位数：</label>
        <input id="input2" type="text" v-model="totalNum" readonly />
      </div>

    </div>




  </div>
</template>
<script>
export default {
  name: 'parkguidance',
  data() {
    return {
      src: require('./park-new.png'),
      remainNum: 30,
      totalNum: 60
    };
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-image: url(./park-new.png);
  background-size: cover;
  /* 使用 cover 值保持背景图等比例放大 */
  background-repeat: no-repeat;
  background-position: center center;

}


#base-image {
  flex: 1;
  /* 这里可以设置底图的样式，例如宽度、高度等 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* 保持图片比例并填充容器 */
  //cursor: pointer;
}


.form-container {
  padding: 20px;
  position: relative;
  flex: 1;
  top: 8%;
  left: 70%;
  flex-direction: row-reverse;

}

.form-container input {
  width: 50px;
  text-align: center;
  color: yellow;
  background-color: black;
}

.form-container label {
  font-size: 12px;
  color:rgb(202, 204, 203)
}

.form-row {
  margin-bottom: 10px;
}

/* 添加其他样式，如字体颜色、边框等 */
</style>